<template>
  <div class="container">
    <div class="page-header">
      <h2>违规内容管理</h2>
    </div>
    <!-- 搜索条件区域 -->
    <div class="card search-card">
      <h2 class="card-title">搜索条件</h2>
      <div class="search-fields">
        <el-input
            v-model="searchContentId"
            placeholder="内容ID"
            clearable
            style="width: 180px;"
        />

        <el-select
            v-model="searchViolationType"
            placeholder="违规类型"
            clearable
            style="width: 180px;"
        >
          <el-option label="全部" value="" />
          <el-option label="垃圾信息" value="spam" />
          <el-option label="色情内容" value="porn" />
          <el-option label="暴力内容" value="violence" />
          <el-option label="虚假信息" value="fake" />
          <el-option label="其他" value="other" />
        </el-select>

        <el-select
            v-model="searchStatus"
            placeholder="处理状态"
            clearable
            style="width: 180px;"
        >
          <el-option label="全部" value="" />
          <el-option label="待处理" value="pending" />
          <el-option label="已处理" value="handled" />
          <el-option label="已申诉" value="appealed" />
        </el-select>

        <el-date-picker
            v-model="searchDateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            unlink-panels
            clearable
            style="width: 300px;"
        />

        <el-button type="primary" @click="fetchViolations">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="card">
      <h2 class="card-title">违规内容列表</h2>
      <el-table
          :data="violations"
          border
          style="width: 100%"
          v-loading="loading"
      >
        <el-table-column prop="violationId" label="ID" width="80" />
        <el-table-column prop="contentId" label="内容ID" width="100" />
        <el-table-column prop="violationType" label="违规类型" width="150">
          <template #default="{ row }">
            {{ getViolationTypeText(row.violationType) }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="handleStatus" label="处理状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getTagType(row.handleStatus)">
              {{ getHandleStatusText(row.handleStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="{ row }">
            {{ $formatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="{ row }">
            <el-button
                type="primary"
                size="small"
                @click="handleViolation(row.violationId)"
                v-if="row.handleStatus === 'pending'"
            >
              标记为已处理
            </el-button>
            <el-tag type="success" size="small" v-else>已处理</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

const { proxy } = getCurrentInstance()
const violations = ref([])
const loading = ref(false)

const searchContentId = ref('')
const searchViolationType = ref('')
const searchStatus = ref('')
const searchDateRange = ref([])

const getViolationTypeText = (type) => {
  switch (type) {
    case 'spam': return '垃圾信息'
    case 'porn': return '色情内容'
    case 'violence': return '暴力内容'
    case 'fake': return '虚假信息'
    case 'other': return '其他'
    default: return '未知类型'
  }
}

const getHandleStatusText = (status) => {
  switch (status) {
    case 'pending': return '待处理'
    case 'handled': return '已处理'
    case 'appealed': return '已申诉'
    default: return '未知状态'
  }
}

const getTagType = (status) => {
  switch (status) {
    case 'pending': return 'warning'
    case 'handled': return 'success'
    case 'appealed': return 'info'
    default: return 'default'
  }
}

const fetchViolations = async () => {
  loading.value = true
  try {
    const params = {}
    if (searchContentId.value) params.contentId = searchContentId.value
    if (searchViolationType.value) params.violationType = searchViolationType.value
    if (searchStatus.value) params.handleStatus = searchStatus.value
    if (searchDateRange.value.length === 2) {
      params.startDate = searchDateRange.value[0]
      params.endDate = searchDateRange.value[1]
    }

    const res = await axios.get('/api/violations', { params })
    if (Array.isArray(res.data)) {
      violations.value = res.data
    } else {
      ElMessage.error('获取的数据格式不正确')
    }
  } catch (err) {
    if (err.response) {
      ElMessage.error(`获取失败: ${err.response.status} ${err.response.data.message || '未知错误'}`)
    } else if (err.request) {
      ElMessage.error('获取失败：没有收到服务器响应')
    } else {
      ElMessage.error(`获取失败：${err.message}`)
    }
  } finally {
    loading.value = false
  }
}

const resetSearch = () => {
  searchContentId.value = ''
  searchViolationType.value = ''
  searchStatus.value = ''
  searchDateRange.value = []
  fetchViolations()
}

const handleViolation = (id) => {
  ElMessageBox.confirm(
      '确定要标记为已处理吗？',
      '处理确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(async () => {
    try {
      await axios.post(`/api/violations/handle/${id}`)
      ElMessage.success('处理成功')
      fetchViolations()
    } catch (err) {
      ElMessage.error(`处理失败：${err.message}`)
    }
  }).catch(() => {})
}

onMounted(fetchViolations)
</script>

<style scoped>
.container {
  padding: 24px;
  background-color: #f5f5f5;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card {
  background-color: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.search-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
</style>

